<template>
  <van-popup
    v-model="showSelectTextFlag"
    position="bottom"
    :round="true"
    :overlay="selectType === 'edit'"
    @close="closeTextBox"
    :duration="0.2"
    :close-on-click-overlay="false"
    get-container="body"
  >
    <!-- 关闭按钮 -->
    <img
      v-if="selectType === 'edit'"
      class="close-icon"
      @click="inputAccomplish"
      src="@/assets/images/text/ic_btm_gb.png"
      alt=""
    />
    <!-- 关闭按钮 -->
    <div class="background-container">
      <!-- 文字输入框 -->
      <div v-show="selectType === 'edit'" class="textarea-container">
        <van-field
          v-model="messageText"
          rows="5"
          type="textarea"
          :autofocus="true"
          placeholder="请输入文字"
          style="min-height: 50px"
        />
      </div>
      <!-- 文字输入框 -->

      <!-- 头部导航栏 -->
      <div
        class="header-content"
        :class="{
          'header-content-border': selectType && selectType !== 'edit',
        }"
      >
        <!-- tab栏 -->
        <div class="tab-content">
          <div
            class="operation-item"
            :class="{
              'operation-item-active': selectType === 'edit',
            }"
            @click="handleTab('edit')"
          >
            <img
              class="operation-item-icon"
              src="@/assets/images/text/ic_btn_keyboard.png"
              alt=""
            />
          </div>
          <div
            class="operation-item"
            :class="{
              'operation-item-active': selectType === 'font',
            }"
            @click="handleTab('font')"
          >
            <img
              class="operation-item-icon"
              src="@/assets/images/text/ic_btn_fonts.png"
              alt=""
            />
          </div>
          <div
            class="operation-item"
            :class="{
              'operation-item-active': selectType === 'color',
            }"
            @click="handleTab('color')"
          >
            <img
              class="operation-item-icon"
              src="@/assets/images/text/ic_btn_color.png"
              alt=""
            />
          </div>
          <div
            class="operation-item"
            :class="{
              'operation-item-active': selectType === 'style',
            }"
            @click="handleTab('style')"
          >
            <img
              class="operation-item-icon"
              src="@/assets/images/text/ic_btn_adjustment.png"
              alt=""
            />
          </div>
          <div
            v-if="selectType === 'edit'"
            @click="messageText = ''"
            class="operation-item"
          >
            <span class="clear-btn">清空</span>
          </div>
          <div class="operation-item">
            <div class="operation-num">
              <div class="operation-icon-container" @click="decrease">
                <img
                  class="operation-item-icon"
                  src="@/assets/images/text/ic_btn_decrease.png"
                  alt=""
                />
              </div>
              <div class="operation-icon-container">
                <span class="font-size-num">{{ parseInt(startFontSize) }}</span>
              </div>
              <div class="operation-icon-container" @click="increase">
                <img
                  class="operation-item-icon"
                  src="@/assets/images/text/ic_btn_increase.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 商店和关闭弹窗 -->
        <div v-if="selectType !== 'edit'" class="operation-content">
          <img
            @click="handleClose"
            class="operation-icon"
            src="@/assets/images/ic_btn_fold.png"
            alt=""
          />
        </div>
      </div>
      <!-- 头部导航栏 -->

      <!-- 字体选择 -->
      <FontFamily v-show="selectType === 'font'" />
      <!-- 字体选择 -->

      <!-- 颜色选择 -->
      <Color v-show="selectType === 'color'" />
      <!-- 颜色选择 -->

      <!-- 样式设置 -->
      <Style v-show="selectType === 'style'" />
      <!-- 样式设置 -->
    </div>
  </van-popup>
</template>

<script>
import { Slider } from "vant";
import FontFamily from "./FontFamily.vue";
import Color from "./Color.vue";
import Style from "./Style.vue";
export default {
  props: {
    textType: {
      type: String,
      default: "",
    },
  },
  components: {
    FontFamily,
    Color,
    Style,
    [Slider.name]: Slider,
  },
  data() {
    return {
      active: 0,
      overlayMask: false,
      selectType: "", // 操作的类型
      showSelectTextFlag: false,
      messageText: this.textType === "car-model-text" ? "粤A88888" : "默认文本",
      fontSize: this.textType === "car-model-text" ? 8 : 16, // 字体大小
      startFontSize: this.textType === "car-model-text" ? 8 : 16,
      fill: this.textType === "car-model-text" ? "#ffffff" : "#000000",
    };
  },

  watch: {
    "$store.state.design.currentSelectionType": {
      immediate: true,
      handler(val, oldVal) {
        const footerContainerEl = document.querySelector("#footer-container");
        if (val === "text") {
          footerContainerEl.style.zIndex = "2000";
          this.showSelectTextFlag = !this.showSelectTextFlag;
          const currentElement =
            this.$store.state.design.currentSelectionElement;
          if (!currentElement) {
            this.selectType = "edit"; // 如果是底部点击打开的话，默认到编辑模式
          }
        } else if (oldVal === "text") {
          this.showSelectTextFlag = false;
          // 关闭时重置信息
          this.messageText =
            this.textType === "car-model-text" ? "粤A88888" : "默认文本";
          this.fontSize = this.textType === "car-model-text" ? 8 : 16;
          this.startFontSize = this.textType === "car-model-text" ? 8 : 16;
        }
      },
    },
    "$store.state.design.currentSelectionElement": {
      immediate: true,
      deep: true,
      handler(val, oldVal) {
        if (val && val.type === "textbox") {
          this.messageText = val.text;
          this.fontSize = val.fontSize;
          this.startFontSize = val.fontSize * val.scaleX;
        }
      },
    },
  },

  created() {
    console.log("激活activated");
  },

  methods: {
    // 关闭弹窗
    handleClose() {
      this.showSelectTextFlag = false;
      this.selectType = null;
      this.$emit("onClose", "text");
      this.handAccountCanvas.discardActiveObject();
    },

    // 关闭弹窗回调
    closeTextBox() {
      this.showSelectTextFlag = false;
      this.selectType = null;
      this.$emit("onClose", "text");
    },

    // 选择其他文字选项
    handleTab(type) {
      const messageText = this.messageText;
      const currentElement = this.$store.state.design.currentSelectionElement;
      if (!messageText) {
        return this.$toast({
          message: "请输入文字",
          position: "center",
        });
      }
      this.selectType = type;
      if (!currentElement && messageText) {
        this.selectType = "";
        this.handAccountCanvas.addText({
          content: messageText,
          fontSize: this.fontSize,
          fill: this.fill,
        });
      }
    },

    // 输入完成
    inputAccomplish() {
      const messageText = this.messageText;
      const currentElement = this.$store.state.design.currentSelectionElement;
      if (messageText && !currentElement) {
        // 正常添加文字
        this.selectType = "";
        this.handAccountCanvas.addText({
          content: messageText,
          fontSize: this.fontSize,
          elType: this.textType,
          fill: this.fill,
        });
      } else if (messageText && currentElement) {
        // 更新文字
        this.selectType = "";
        this.handAccountCanvas.updateTextBox({
          type: "text",
          content: messageText,
          elType: this.textType,
        });
      } else {
        this.$toast({
          message: "请输入文字",
          position: "center",
        });
      }
    },

    // 减小字体大小
    decrease() {
      const currentElement = this.$store.state.design.currentSelectionElement;
      let fontSize = (this.fontSize -= 1);
      if (currentElement) {
        // 更新
        if (fontSize >= 8) {
          this.handAccountCanvas
            .updateTextBox({
              type: "decreaseFontSize",
              content: fontSize,
            })
            .then(() => {
              // this.fontSize = fontSize;
            });
        } else {
          this.fontSize = 8;
          this.$toast({
            message: "已经是最小字体了",
            position: "center",
          });
        }
      } else {
        // 编辑的时候设置
        this.fontSize = this.fontSize;
        document.querySelector("textarea").style.fontSize =
          this.fontSize + "px";
      }
    },

    // 增大字体大小
    increase() {
      const currentElement = this.$store.state.design.currentSelectionElement;
      let fontSize = (this.fontSize += 1);
      if (currentElement) {
        this.handAccountCanvas.updateTextBox({
          type: "increaseFontSize",
          content: fontSize,
        });
      } else {
        this.fontSize = this.fontSize;
        document.querySelector("textarea").style.fontSize =
          this.fontSize + "px";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.background-container {
  min-height: 78px;
  width: 100vw;
  display: flex;
  flex-direction: column;
  z-index: 99999;
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 5px 1px #eeeef3;

  .header-content {
    display: flex;
    width: 100vw;
    height: 68px;
    align-items: center;
    position: relative;
  }

  .header-content-border {
    &::before {
      display: block;
      content: "";
      position: absolute;
      bottom: 10px;
      width: 200%;
      left: 0;
      border-bottom: 1px solid #eaeaea;
      transform: scale(0.5);
      transform-origin: left bottom;
    }
  }

  .tab-content {
    display: flex;
    flex-wrap: wrap;
    padding: 0 18px;
    justify-content: space-between;
    align-items: center;
    flex: 1;

    .operation-item {
      .operation-item-icon {
        width: 24px;
        height: 24px;
        float: left;
      }

      .clear-btn {
        display: inline-block;
        text-align: center;
        font-weight: bold;
        height: 20px;
        width: 48px;
        font-size: 12px;
        line-height: 20px;
        border-radius: 11px;
        border: 2px solid #8da6ef;
        color: #8da6ef;
        background: #d6dfeb;
      }

      .operation-num {
        background: #d6dfeb;
        width: 80px;
        height: 30px;
        border-radius: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 6px;

        .operation-item-icon {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }

        .font-size-num {
          font-weight: bold;
        }

        .operation-icon-container {
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
        }
      }
    }

    .operation-item-active {
      background: #d6dfeb;
      border-radius: 4px;
      padding: 4px;
    }
  }

  .operation-content {
    display: flex;
    width: 56px;
    justify-content: space-around;
    position: relative;

    &::before {
      display: block;
      content: "";
      height: 24px;
      width: 1px;
      background: #eaeaea;
      position: absolute;
      top: 0;
      left: 5px;
      bottom: 0;
      margin: auto;
    }

    .operation-icon {
      width: 20px;
      height: 20px;
      display: block;
    }
  }

  .textarea-container {
    height: 130px;
    padding-top: 10px;
  }
}

.van-popup {
  overflow: visible !important;
}

.close-icon {
  width: 40px;
  height: 45px;
  position: absolute;
  top: -32px;
  right: 10px;
  z-index: 9999;
}
</style>
